<template>
  <!-- 面包屑导航栏 -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>数据统计</el-breadcrumb-item>
    <el-breadcrumb-item>数据报表</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 卡片视图区域 -->
  <el-card>
    <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 750px; height: 400px"></div>
  </el-card>
</template>

<script>
// 1. 导入 echarts
import * as echarts from "echarts";
import _ from "lodash";
import { getCurrentInstance, onMounted, inject } from "vue";

export default {
  setup() {
    // 获取vue实例
    const { proxy } = getCurrentInstance();
    // 注入一个axios
    const axios = inject("axios");

    // 需要合并的数据
    const options = {
      title: {
        text: "用户来源",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#E9EEF3",
          },
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          boundaryGap: false,
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
    };

    onMounted(async () => {
      // 3. 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById("main"));

      const { data: res } = await axios.get("reports/type/1");
      if (res.meta.status !== 200) {
        return proxy.$message.error("获取折线图数据失败！");
      }

      // 4. 准备数据和配置项
      const result = _.merge(res.data, options);

      // 5. 展示数据
      myChart.setOption(result);
    });
  },
};
</script>